<template>
	<view style="padding-bottom: 200rpx;">
		<!-- <view style="color: #B1B1B1;font-size: 28rpx;text-align: center;">*预计5天内发货，</view> -->
		<view class="item" @click="checkedItem(item.id)">
			<view class="chanp" style="margin-left: 20rpx;">
				<image :src="ordersData.cardGoodsVo.goodsImage" mode="aspectFill"></image>
			</view>
			<view style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;">
				<view class="item_title">{{ordersData.cardGoodsVo.goodsName}}</view>
			</view>
		</view>
		<view class="address">
			<view class="dizhi">
				<view class="detail">
					<!-- <image v-show="addressList[0].isDefault==1" src="/static/icon/moren.png" mode=""></image> -->
					{{ordersData.sendAddress}}
				</view>
				<view style="font-size: 26rpx;margin-top: 20rpx;">
					<text style="margin-right: 20rpx;color: #3f3f3f;">{{addressList[0].shipName}}</text>
					<text style="color: #B1B1B1;">{{addressList[0].shipPhone}}</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="yunfei">
				<view>
					<view>购买数量：</view>
					<view>{{ordersData.count}}</view>
				</view>
				<view>
					<view>支付金额：</view>
					<view>￥{{ordersData.payMoney}}</view>
				</view>
				<view>
					<view>收货信息：</view>
					<view>{{ordersData.sendAddress}}{{ordersData.sendName}}{{ordersData.sendPhone}}</view>
				</view>
				<view>
					<view>下单时间：</view>
					<view>{{ordersData.createTime}}</view>
				</view>
				<view v-if="ordersData.shipTime">
					<view>发货时间：</view>
					<view>{{ordersData.shipTime}}</view>
				</view>
				<view v-if="ordersData.expressageCompany">
					<view>物流公司：</view>
					<view>{{ordersData.expressageCompany}}</view>
				</view>
				<view v-if="ordersData.expressageNumber">
					<view>物流单号：</view>
					<view>{{ordersData.expressageNumber}}</view>
				</view>
				<view>
					<view>订单状态：</view>
					<view>{{ordersData.orderStatus=='1'?'待发货':ordersData.orderStatus=='2'?'待收货':'已完成'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderInfo
	} from '@/common/index.js'
	// import myOptions from '@/common/static.js'
	// import { freight,shipGoods,queryOrdersInfo } from '@/common/myorder.js'
	// import { queryUserAddressList } from '@/common/address.js'
	export default {
		data() {
			return {
				myList: [],
				addressList: [],
				freights: 0,
				type: 123,
				ordersData: {}
			};
		},
		onLoad(opt) {
			var that = this;
			//console.log(opt)

			if (opt.id) {
				uni.setNavigationBarTitle({
					title: ''
				});
				getOrderInfo(opt.id).then(res => {
					//console.log(res)
					this.ordersData = res.data
				})
				return false
			}
			this.myList = myOptions.myOrderOptions;
			queryUserAddressList().then(res => {
				res.data.forEach((val, item) => {
					if (val.isDefault == 1) {
						that.addressList = [val];
					}
				})
				freight({
					selectProductVoList: myOptions.myOrderbagList,
					userAddress: {
						id: that.addressList[0].id
					}
				}).then(res => {
					//console.log(res)
					this.freights = res.data.freight;
				})
			})
		},
		methods: {
			gotoAddress() {
				if (this.type != 123) return false
				uni.navigateTo({
					url: '/pagesC/address/address?IsSelectAddress=true'
				})
			},
			submitOrder() {
				shipGoods({
					selectProductVoList: myOptions.myOrderbagList,
					userAddress: {
						id: this.addressList[0].id
					}
				}).then(res => {
					//console.log(res)
					uni.showToast({
						icon: 'none',
						msg: '操作成功',
						success() {
							setTimeout(() => {
								uni.navigateBack();
							}, 1000)
						}
					})

				})
			},
			copyinviteCode(data) {
				uni.setClipboardData({
					data: data,
					showToast: false,
					success: (res) => {
						uni.showToast({
							icon: 'none',
							title: '邀请码已复制'
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #e5e5e5;
		// overflow: hidden;
	}

	.item {
		width: 660rpx;
		height: 264rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 16rpx auto 16rpx;
		display: flex;
		padding: 32rpx;
		box-sizing: border-box;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.chanp {
			width: 200rpx;
			height: 200rpx;
			background: #FFFFFF;
			border: 1px solid #F4F4F4;
			border-radius: 8rpx;
			margin-right: 40rpx;

			image {
				width: 184rpx;
				height: 184rpx;
				vertical-align: bottom;
				// margin-top: 8rpx;
				// margin-left: 8rpx;
			}
		}

		.item_title {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			font-size: 28rpx;
			color: #3E3E3E;
		}

		.item_grade {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			>view {
				height: 36rpx;
				line-height: 36rpx;
			}

			.money {
				image {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
					margin-right: 8rpx;
				}
			}
		}

		.group {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			left: 12rpx;
			top: 116rpx;
		}
	}

	.address {
		width: 686rpx;
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 20rpx auto 34rpx;

		.add {
			line-height: 140rpx;
			display: flex;
			justify-content: center;
			font-size: 32rpx;
		}

		.dizhi {
			padding: 30rpx 32rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			color: #1F1F1F;
		}

		image {
			width: 68rpx;
			height: 36rpx;
			margin-right: 12rpx;
			vertical-align: middle;
		}

	}

	.list {
		width: 686rpx;
		margin: 32rpx auto;
		background: #FFFFFF;
		border-radius: 12px;

		// overflow: hidden;
		.yunfei {
			width: 620rpx;
			margin: 16rpx auto;

			>view {
				display: flex;
				justify-content: space-between;
				padding: 16rpx 0;
				font-size: 28rpx;
				color: #1F1F1F;

				&>view:last-child {
					color: #535353;
					width: 70%;
				}
			}
		}

	}

	.detail {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.title {
		width: 686rpx;
		margin: 32rpx auto 0;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
	}

	.btns {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 164rpx;
		background: #fff;
		border-radius: 28rpx 28rpx 0px 0px;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 0 28rpx;
		box-sizing: border-box;

		.customizeBlackButton {
			width: 240rpx;
			font-size: 32rpx;
		}

		>view {
			margin-top: 38rpx;
		}
	}
</style>